<template>
  <pro-dialog ref="addFielDom" width="824" :nopadding="true" :title="`${curField?'编辑':'新增'}字段`">
    <div class="modal-tpl" style="padding: 6px 24px 24px">
      <YsForm class="add-form" label-position="top" ref="addFielFrom" :rules="ruleValidate" :model="detailInfo" inline>
        <YsRow :gutter="16">
          <YsCol span="12">
            <YsFormItem label="字段" prop="field_id">
              <Select size="large" transfer clearable class="search-box select-border" v-model="detailInfo.field_id"
                placeholder="请选择字段">
                <Option v-for="(item, index) in fieldInfos" :value="item.id" @click.native="getFieldItem(item)"
                  :key="index" :label="item.field_name"></Option>
              </Select>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="字段类型" prop="field_type">
              <Select size="large" transfer class="search-box select-border search-zd" disabled
                v-model="detailInfo.field_type" placeholder="请选择字段类型">
                <Option v-for="(item, index) in fieldTypeList" :value="item.id" :key="index" :label="item.label">
                </Option>
              </Select>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow :gutter="16">
          <YsCol span="12">
            <YsFormItem label="默认值" prop="field_default_val">
              <YsInput type="text" size="large" :class="curTheme" class="input-border" :maxlength="15"
                v-model.trim="detailInfo.field_default_val" placeholder="请输入默认值">
              </YsInput>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="顺序号" prop="sort_key">
              <YsInput type="text" size="large" :class="curTheme" class="input-border" :maxlength="2"
                v-model.number="detailInfo.sort_key" placeholder="请输入顺序号">
              </YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow class="foot-btn" style="margin-top: 4px">
          <YsButton size="large" @click="$refs.addFielDom.close()">取消</YsButton>
          <YsButton size="large" @click="submitTpClick('addFielFrom')" type="primary">确定</YsButton>
        </YsRow>
      </YsForm>
    </div>
  </pro-dialog>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: 'addTplFiel',
  props: {
    tplObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    ...mapState(['curTheme']),
  },
  created() {
    this.getFielList()
  },
  data() {
    return {
      fieldTypeList: [
        { id: 1, label: "文本" },
        { id: 2, label: "数值" }
      ],
      curField: null,
      fieldInfos: [],
      detailInfo: {
        tp_id: null,
        field_id: null,
        field_default_val: "",
        field_class: 1,
        field_type: null,
        sort_key: null,
      },

      ruleValidate: {
        field_id: [
          { required: true, message: '请选择字段', type: 'number', trigger: 'change' }
        ],
        field_default_val: [
          { required: true, message: '请输入默认值', trigger: 'blur' }
        ],
        sort_key: [
          { required: true, message: '请输入顺序号', type: 'number', trigger: 'blur' }
        ],
      },
    }
  },
  watch: {
    "detailInfo.field_id"(newdata, olddata) {
      if (newdata == "") {
        this.detailInfo.field_type = ""
      }
    }
  },
  methods: {
    ...mapActions(['addTemplaFieldAPI', "editTemplaFieldAPI", "getPageFieldAPI"]),
    // 获取字段列表
    getFielList() {
      this.getPageFieldAPI({ keyword: "", field_classes: [1, 2, 3, 4, 5], start_recd: 1, limit_recd: 999 }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.fieldInfos = data.fieldInfos || []
        } else {
          this.fieldInfos = this.$options.data().fieldInfos
        }
      })
    },
    //提交新增
    submitTpClick(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.curField) {
            this.exitFieldFn()
          } else {
            this.addFieldFn()
          }
        }
      })
    },
    // 新增
    addFieldFn() {
      this.detailInfo.tp_id = this.tplObj.id
      this.addTemplaFieldAPI({ detailInfo: this.detailInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$parent.getBrowseList()
          this.$YsMessage.success(data.message_text);
          this.$refs.addFielDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('新增失败');
      })
    },
    // 编辑
    exitFieldFn() {
      this.editTemplaFieldAPI({ detailInfo: this.detailInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$parent.getBrowseList()
          this.$YsMessage.success(data.message_text);
          this.$refs.addFielDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('编辑失败');
      })
    },
    //打开弹出
    openFielModal(item) {
      this.$refs.addFielFrom.resetFields()
      if (item) {
        this.curField = item
        this.detailInfo.id = item.id
        this.detailInfo.tp_id = item.tp_id
        this.detailInfo.field_id = item.field_id
        this.detailInfo.field_type = item.field_type
        this.detailInfo.field_default_val = item.field_default_val
        this.detailInfo.sort_key = item.sort_key
      } else {
        this.curField = this.$options.data().curField
        this.detailInfo = this.$options.data().detailInfo
      }
      this.$refs.addFielDom.show()
    },
    //设置选择内容
    getFieldItem(item) {
      this.detailInfo.field_type = item.field_type
    },
  }
}
</script>

<style scoped lang='less'>
.modal-tpl {
  /deep/.ivu-form-item {
    width: 100%;
    margin-bottom: 24px;

    .ivu-input-word-count {
      top: initial;
      bottom: 10px;
    }
  }

  .foot-btn {
    /deep/ .ivu-btn {
      min-width: 96px !important;
    }
  }

  .search-zd {
    /deep/.ivu-select-selection {
      background: transparent;
    }
  }
}

/deep/ .theme-blue.input-border input{
  border: 1px solid #566582 !important ;
}
</style>